<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>盒子模型</title>
		<style>
			.box1{
				width:200px;
				height:300px;
				border:1px solid red;
				/*margin-top:100px;
				margain-left:100px;
				margain-right:100px;
				margain-bottom:100px; */
				/*复合写法*/
				/*margain 10px 20px 30px;*/
				margain:100px auto 80px;
				/*margin-auto;*/  /*auto:自动的*/
			}
			.box2{
				width:200px;
				height:300px;
				border:1px solid blue;
				margin:100px auto 0;      /*外边距合并：相邻两个盒子之间使用最大的的外边距*/
			/*相邻两个盒子之间的外边距合并问题：
			两个盒子同时设置了外边距,相同边只取外边距最大值.
			tips:一般来说只设置一个盒子的外边距*/
			}
			
			.wbox{
				width:200px;
				height:200px;
				background-color:skyblue;
				/*外边距塌陷问题*/
			}
			.Nbox{
				width:100px;
				height:100px;
				background-color: hotpink;
				margin:20px 100px 100px 20px;
			}
		</style>
	</head>
	<body>
		<!--4个元素：内容content、内边距padding、边框border、外边距margain-->
		<div class="box1">hello box!</div>
		<div class="box2">hello box2</div>
		<div class="wbox">
			<div class="Nbox"></div>
				</div>
		</body>
</html>
